<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>附件选择</title>
    <link href="__STATIC__/component/pear/css/pear.css" rel="stylesheet" />
    {include file='public/head.html'}
</head>
<body class="childrenBody {:dialog_css()}" style="padding:0;">

<!-- 表格 -->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="currentTable" lay-filter="currentTable"></table>
    </div>
</div>

<script type="text/html" id="picTpl">
    {{- d.type == 'image' ? '<img style="max-width:80px; max-height:30px;" src="'+d.path+'" data-image="'+d.title+'">' : '<img style="max-width:80px; max-height:30px;" src="{:url('ajax/icon')}??suffix='+d.ext+'">' }}
</script>

<script type="text/html" id="barTool">
    <a data-href="{{d.path}}" data-type="{{d.type}}" class="layui-btn layui-btn-danger layui-btn-xs btn-chooseone"><i class="layui-icon layui-icon-ok"></i> 选择</a>
</script>

<span id="parent_field" class="layui-hide"></span>

<script src="__STATIC__/component/layui/layui.js"></script>
<script src="__STATIC__/component/pear/pear.js"></script>
<script>
    layui.use(['aphpTable', 'aphp'], function () {
        var aphpTable = layui.aphpTable;
        var aphp = layui.aphp;
        var $ = layui.$;
        var host = window.location.protocol + '//' + window.location.host;

        var init = {
            table_elem: '#currentTable',
            table_render_id: 'currentTable',
            add_url: "{:url('add')}",
            delete_url: "{:url('del')}",
            modify_url: "{:url('multi')}",
        };

        aphpTable.render({
            init: init,
            url: "{:url('index')}",
            where: { where: location.search.slice(1) },
            toolbar: ['refresh_table'],
            search: true,
            cols: [
                [
                    { title: 'ID', field: 'id', maxWidth: 60, search: false },
                    { title: '名称', field: 'title', width: 130, searchOp: 'like' },
                    { title: '图片', field: 'path', maxWidth:60, templet: '#picTpl', search: false },
                    { title: '大小', field: '_size', width: 90, search: false },
                    { title: 'Mime类型', field: 'mime', width: 100, searchOp: 'like' },
                    {
                        title: '地址',
                        field: 'path',
                        width: 70,
                        templet: '<div><span class="copy" title="复制" data-copy-text="' + host + '{{d.path}}">复制 <i class="layui-icon layui-icon-file-b"></i></span></div>',
                        search: false
                    },
                    { title: '操作', align: 'center', width: 85, toolbar: '#barTool' }
                ]
            ],
            page: {}
        });
        aphpTable.bindEvent();

        // 选择附件
        $(document).on('click', '.btn-chooseone', function() {
            var path = $(this).attr('data-href');
            var type = $(this).attr('data-type');
            var field = $('#parent_field').html();
            if (field !== '') {
                parent.layui.$('#' + field).val(path);
                if (type === 'image') {
                    parent.layui.$('#' + field+ '-preview').attr('src', path).show();
                    parent.layui.$('#' + field+ '-remove').show();
                }
            }
            var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
            parent.layer.close(index); // 再执行关闭
        });

    });
</script>
</body>
</html>